<template>
  <div style="width:100%; min-height: 700px; background: white; padding: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1)">
    <el-button @click="backLast">返 回</el-button>
    <el-row type="flex" class="row-bg mt-20px mb-20px" justify="center" style="font-size: 14px;">
      <el-col :xl="4" :lg="4" :md="24" :sm="24" :xs="24" style="margin-top: 10px">
        <p>校验结果
          <el-tag v-if="dataResp.validMethod === 0" type="info">关闭校验</el-tag>
          <el-tag v-else :type="dataResp.vaildResult === 1 ? 'success' : 'danger'">{{dataResp.validMethod === 1 ? '二要素校验' : '三要素校验'}}{{dataResp.vaildResult === 1 ? '通过' : '不通过'}}</el-tag>
        </p>
      </el-col>
      <el-col :xl="5" :lg="5" :md="24" :sm="24" :xs="24" style="margin-top: 10px">
        <span>姓名 {{dataResp.queryName}} {{dataResp.validGender ? dataResp.validGender : '未知'}}  | {{dataResp.validAge ? dataResp.validAge + '岁' : '未知'}}</span>
        <span style="margin-left: 5px">
          <span v-if="dataResp.riskType === 1" style="font-size: 13px;; padding: 3px 10px; background: #2bb673; color: white; border-radius: 5px;">安全客户</span>
          <span v-else style="font-size: 13px; padding: 3px 10px; background: red; color: white; border-radius: 5px;">
<!--            <span>{{dataResp.riskType === 2 ? '撸子' : '疑似撸'}}</span>-->
            <el-popover
              placement="bottom"
              width="700"
              trigger="click">
              <el-table :data="lzList" style="height: 280px">
                <el-table-column label="姓名" align="center" prop="name" />
                <el-table-column label="手机号" align="center" prop="mobile" />
                <el-table-column label="身份证" align="center" prop="idCard" min-width="160"/>
                <el-table-column label="用户类型" align="center" prop="type" />
                <el-table-column label="查询次数" align="center" prop="queryCount" />
              </el-table>
              <template #reference>
                <span style="cursor: pointer">{{dataResp.riskType === 2 ? '撸子' : '疑似撸'}}(<span>{{dataResp.riskTypeFinanceIds.length}}</span>)</span>
              </template>
            </el-popover>
          </span>
        </span>
      </el-col>
      <el-col :xl="5" :lg="5" :md="24" :sm="24" :xs="24" style="margin-top: 10px">
        <p>身份证：{{dataResp.queryIdCard}}</p>
      </el-col>
      <el-col :xl="5" :lg="5" :md="24" :sm="24" :xs="24" style="margin-top: 10px">
        <p>{{dataResp.validAddress ? dataResp.validAddress : '未知地区'}} <el-tag class="ml-10px">{{dataResp.validAddressType ? dataResp.validAddressType : '未知地区'}}</el-tag></p>
      </el-col>
      <el-col :xl="5" :lg="5" :md="24" :sm="24" :xs="24" style="margin-top: 10px">
        <p>注册时间：{{dataResp.queryTime}}</p>
      </el-col>
    </el-row>

    <el-tabs v-model="normal">
      <el-tab-pane v-for="(dataApi, index) in dataApis" :key="index" :label="dataApi.name" :name="index">
        <el-row type="flex" class="row-bg mb-20px" justify="center" align="middle">
          <p v-if="dataApi.code === 'ZCI023' && dataResp.tanzc" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.tanzc.queryTime) }}</p>
          <p v-if="dataApi.code === 'ZCI008' && dataResp.qjld" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.qjld.queryTime) }}</p>
          <p v-if="dataApi.code === 'ZCI022' && dataResp.qjda" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.qjda.queryTime) }}</p>
          <p v-if="dataApi.code === 'ZCI007' && dataResp.fyfx" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.fyfx.queryTime) }}</p>
          <p v-if="dataApi.code === 'ZCI003' && dataResp.zwsc" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.zwsc.queryTime) }}</p>
          <p v-if="dataApi.code === 'lsbg' && dataResp.lsbg" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.lsbg.queryTime) }}</p>
          <p v-if="dataApi.code === 'ZCI101' && dataResp.wdgz" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.wdgz.queryTime) }}</p>
          <p v-if="dataApi.code === 'ZCI105' && dataResp.fqz" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.fqz.queryTime) }}</p>
          <p v-if="dataApi.code === 'ZCI104' && dataResp.xfhx" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.xfhx.queryTime) }}</p>
          <p v-if="dataApi.code === 'ZCI106' && dataResp.dtjd" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.dtjd.queryTime) }}</p>
          <el-button type="primary" @click="refreshData(dataApi.code)">
            {{dataApi.code === 'ZCI023' ? (dataResp.tanzc ? '刷新报告' : '查询报告')
            : (dataApi.code === 'ZCI008' ? (dataResp.qjld ? '刷新报告' : '查询报告')
              : (dataApi.code === 'ZCI022' ? (dataResp.qjda ? '刷新报告' : '查询报告')
                : (dataApi.code === 'ZCI007' ? (dataResp.fyfx ? '刷新报告' : '查询报告')
                  : (dataApi.code === 'ZCI003' ? (dataResp.zwsc ? '刷新报告' : '查询报告')
                    : (dataApi.code === 'lsbg' ? (dataResp.lsbg ? '刷新报告' : '查询报告')
                      : (dataApi.code === 'ZCI101' ? (dataResp.wdgz ? '刷新报告' : '查询报告')
                        : (dataApi.code === 'ZCI105' ? (dataResp.fqz ? '刷新报告' : '查询报告')
                          : (dataApi.code === 'ZCI104' ? (dataResp.xfhx ? '刷新报告' : '查询报告')
                            : (dataApi.code === 'ZCI106' ? (dataResp.dtjd ? '刷新报告' : '查询报告')
                              : '')))))))))}}
            {{' ( ' + dataApi.price + ' 元 )'}}
          </el-button>
        </el-row>
        <TzCList v-if="dataApi.code === 'ZCI023' && dataResp.tanzc" :tzdata="dataResp.tanzc" :dataId="dataId"/>
        <QjldList v-if="dataApi.code === 'ZCI008' && dataResp.qjld" :qjlddata="dataResp.qjld" :dataId="dataId"/>
        <QjdaList v-if="dataApi.code === 'ZCI022' && dataResp.qjda" :qjdadata="dataResp.qjda" :dataId="dataId"/>
        <FyfxList v-if="dataApi.code === 'ZCI007' && dataResp.fyfx" :fyfxdata="dataResp.fyfx" :dataId="dataId"/>
        <ZwscList v-if="dataApi.code === 'ZCI003' && dataResp.zwsc" :zwscdata="dataResp.zwsc" :dataId="dataId"/>
        <LsbgList v-if="dataApi.code === 'lsbg' && dataResp.lsbg" :lsbgdata="dataResp.lsbg" :dataId="dataId"/>
        <WdgzList v-if="dataApi.code === 'ZCI101' && dataResp.wdgz" :wdgzdata="dataResp.wdgz" :dataId="dataId"/>
        <FqzList v-if="dataApi.code === 'ZCI105' && dataResp.fqz" :fqzdata="dataResp.fqz" :dataId="dataId"/>
        <XfhxList v-if="dataApi.code === 'ZCI104' && dataResp.xfhx" :xfhxdata="dataResp.xfhx" :dataId="dataId"/>
        <dtjdList v-if="dataApi.code === 'ZCI106' && dataResp.dtjd" :dtjddata="dataResp.dtjd" :dataId="dataId"/>
      </el-tab-pane>
<!--      <el-tab-pane v-if="dataApis?.find((item) => item.code === 'ZCI023')" :label="(dataApis?.find((item) => item.code === 'ZCI023') || { name: '探针C' }).name" name="tzc">
        <el-row type="flex" class="row-bg mb-20px" justify="center" align="middle">
          <p v-if="dataResp.tanzc" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.tanzc.queryTime) }}</p>
          <el-button type="primary" @click="refreshData('ZCI023')">
            {{dataResp.tanzc ? '刷新报告' : '查询报告'}}
            {{' ( ' + dataApis?.find((item) => item.code === 'ZCI023')?.price + ' 元 )'}}
          </el-button>
        </el-row>
        <TzCList v-if="dataResp.tanzc" :tzdata="dataResp.tanzc" :dataId="dataId"/>
      </el-tab-pane>

      <el-tab-pane style="overflow-y: scroll; height: 600px" v-if="dataApis?.find((item) => item.code === 'ZCI008')" :label="(dataApis?.find((item) => item.code === 'ZCI008') || { name: '全景雷达' }).name" name="qjld">
        <el-row type="flex" class="row-bg mb-20px" justify="center" align="middle">
          <p v-if="dataResp.qjld" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.qjld.queryTime) }}</p>
          <el-button type="primary" @click="refreshData('ZCI008')">
            {{dataResp.qjld ? '刷新报告' : '查询报告'}}
            {{' ( ' + dataApis?.find((item) => item.code === 'ZCI008')?.price + ' 元 )'}}
          </el-button>
        </el-row>
        <QjldList v-if="dataResp.qjld" :qjlddata="dataResp.qjld" :dataId="dataId"/>
      </el-tab-pane>

      <el-tab-pane style="overflow-y: scroll; height: 600px" v-if="dataApis?.find((item) => item.code === 'ZCI022')" :label="(dataApis?.find((item) => item.code === 'ZCI022') || { name: '全景档案' }).name" name="qjda">
        <el-row type="flex" class="row-bg mb-20px" justify="center" align="middle">
          <p v-if="dataResp.qjda" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.qjda.queryTime) }}</p>
          <el-button type="primary" @click="refreshData('ZCI022')">
            {{dataResp.qjda ? '刷新报告' : '查询报告'}}
            {{' ( ' + dataApis?.find((item) => item.code === 'ZCI022')?.price + ' 元 )'}}
          </el-button>
        </el-row>
        <QjdaList v-if="dataResp.qjda" :qjdadata="dataResp.qjda" :dataId="dataId"/>
      </el-tab-pane>

      <el-tab-pane v-if="dataApis?.find((item) => item.code === 'ZCI007')" :label="(dataApis?.find((item) => item.code === 'ZCI007') || { name: '法院风险（新）' }).name" name="fyfx">
        <el-row type="flex" class="row-bg mb-20px" justify="center" align="middle">
          <p v-if="dataResp.fyfx" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.fyfx.queryTime) }}</p>
          <el-button type="primary" @click="refreshData('ZCI007')">
            {{dataResp.fyfx ? '刷新报告' : '查询报告'}}
            {{' ( ' + dataApis?.find((item) => item.code === 'ZCI007')?.price + ' 元 )'}}
          </el-button>
        </el-row>
        <FyfxList v-if="dataResp.fyfx" :fyfxdata="dataResp.fyfx" :dataId="dataId"/>
      </el-tab-pane>

      <el-tab-pane
        v-if="dataApis?.find((item) => item.code === 'ZCI003')"
                   :label="(dataApis?.find((item) => item.code === 'ZCI003') || { name: '在网时长' }).name"
                   name="zwsc">
        <el-row type="flex" class="row-bg mb-20px" justify="center" align="middle">
          <p v-if="dataResp.zwsc" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.zwsc.queryTime) }}</p>
          <el-button type="primary" @click="refreshData('ZCI003')">
            {{dataResp.zwsc ? '刷新报告' : '查询报告'}}
            {{' ( ' + dataApis?.find((item) => item.code === 'ZCI003')?.price + ' 元 )'}}
          </el-button>
        </el-row>
        <ZwscList v-if="dataResp.zwsc" :zwscdata="dataResp.zwsc" :dataId="dataId"/>
      </el-tab-pane>

      <el-tab-pane
        v-if="dataApis?.find((item) => item.code === 'lsbg')"
                   :label="(dataApis?.find((item) => item.code === 'lsbg') || { name: '流水报告' }).name"
                   name="lsbg">
        <el-row type="flex" class="row-bg mb-20px" justify="center" align="middle">
          <p v-if="dataResp.lsbg" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.lsbg.queryTime) }}</p>
          <el-button type="primary" @click="refreshData('lsbg')">
            {{dataResp.lsbg ? '刷新报告' : '查询报告'}}
            {{' ( ' + dataApis?.find((item) => item.code === 'lsbg')?.price + ' 元 )'}}
          </el-button>
        </el-row>
        <LsbgList v-if="dataResp.lsbg" :lsbgdata="dataResp.lsbg" :dataId="dataId"/>
      </el-tab-pane>

      <el-tab-pane
        v-if="dataApis?.find((item) => item.code === 'ZCI101')"
        :label="(dataApis?.find((item) => item.code === 'ZCI101') || { name: '司法报告' }).name"
        name="wdgz">
        <el-row type="flex" class="row-bg mb-20px" justify="center" align="middle">
          <p v-if="dataResp.wdgz" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.wdgz.queryTime) }}</p>
          <el-button type="primary" @click="refreshData('ZCI101')">
            {{dataResp.wdgz ? '刷新报告' : '查询报告'}}
            {{' ( ' + dataApis?.find((item) => item.code === 'ZCI101')?.price + ' 元 )'}}
          </el-button>
        </el-row>
        <WdgzList v-if="dataResp.wdgz" :wdgzdata="dataResp.wdgz" :dataId="dataId"/>
      </el-tab-pane>

      <el-tab-pane
        v-if="dataApis?.find((item) => item.code === 'ZCI105')"
                   :label="(dataApis?.find((item) => item.code === 'ZCI105') || { name: '逾期探查报告' }).name"
                   name="fqz">
        <el-row type="flex" class="row-bg mb-20px" justify="center" align="middle">
          <p v-if="dataResp.fqz" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.fqz.queryTime) }}</p>
          <el-button type="primary" @click="refreshData('ZCI105')">
            {{dataResp.fqz ? '刷新报告' : '查询报告'}}
            {{' ( ' + dataApis?.find((item) => item.code === 'ZCI105')?.price + ' 元 )'}}
          </el-button>
        </el-row>
        <FqzList v-if="dataResp.fqz" :fqzdata="dataResp.fqz" :dataId="dataId"/>
      </el-tab-pane>

      <el-tab-pane
        v-if="dataApis?.find((item) => item.code === 'ZCI104')"
                   :label="(dataApis?.find((item) => item.code === 'ZCI104') || { name: '智查全景报告' }).name"
                   name="xfhx">
        <el-row type="flex" class="row-bg mb-20px" justify="center" align="middle">
          <p v-if="dataResp.xfhx" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.xfhx.queryTime) }}</p>
          <el-button type="primary" @click="refreshData('ZCI104')">
            {{dataResp.xfhx ? '刷新报告' : '查询报告'}}
            {{' ( ' + dataApis?.find((item) => item.code === 'ZCI104')?.price + ' 元 )'}}
          </el-button>
        </el-row>
        <XfhxList v-if="dataResp.xfhx" :xfhxdata="dataResp.xfhx" :dataId="dataId"/>
      </el-tab-pane>

      <el-tab-pane
        v-if="dataApis?.find((item) => item.code === 'ZCI106')"
                   :label="(dataApis?.find((item) => item.code === 'ZCI106') || { name: 'TC 报告' }).name"
                   name="dtjd">
        <el-row type="flex" class="row-bg mb-20px" justify="center" align="middle">
          <p v-if="dataResp.dtjd" class="mr-20px" style="color: #8c939d; font-size: 14px">最新报告生成时间：{{ formatDate(dataResp.dtjd.queryTime) }}</p>
          <el-button type="primary" @click="refreshData('ZCI106')">
            {{dataResp.dtjd ? '刷新报告' : '查询报告'}}
            {{' ( ' + dataApis?.find((item) => item.code === 'ZCI106')?.price + ' 元 )'}}
          </el-button>
        </el-row>
        <dtjdList v-if="dataResp.dtjd" :dtjddata="dataResp.dtjd" :dataId="dataId"/>
      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import {formatDate} from '@/utils/formatTime'
import TzCList from "@/views/business/dataquery/detail/tanzc/index.vue";
import QjldList from "@/views/business/dataquery/detail/qjld/index.vue";
import QjdaList from "@/views/business/dataquery/detail/qjda/index.vue";
import FyfxList from "@/views/business/dataquery/detail/fyfx/index.vue";
import ZwscList from "@/views/business/dataquery/detail/zwsc/index.vue";
import LsbgList from "@/views/business/dataquery/detail/lsbg/index.vue";
import WdgzList from "@/views/business/dataquery/detail/wdgz/index.vue";
import FqzList from "@/views/business/dataquery/detail/fqz/index.vue";
import XfhxList from "@/views/business/dataquery/detail/xfhx/index.vue";
import DtjdList from "@/views/business/dataquery/detail/dtjd/index.vue";
import { DataQueryApi, DataQuery } from '@/api/business/dataquery'
import {ApiTypeInfoApi} from "@/api/business/apitypeinfo";
import {useTagsView} from "@/hooks/web/useTagsView";
import {TfFinanceApi} from "@/api/business/tffinance";
const { closeCurrent } = useTagsView()

const message = useMessage() // 消息弹窗

const route = useRoute() // 路由
const router = useRouter() // 路由

const normal = ref(0);
const dataId = ref();

/** 数据 列表 */
defineOptions({ name: 'DataQueryDetail' })

const lzList = ref() // 搜索的表单
/** 获取撸子 */
const getLz = async (ids) => {
  if (ids && ids.length > 0) {
    lzList.value = await TfFinanceApi.getTfFinancesByIds({ids})
  }
}

const dataApis = ref()
/** 查询列表 */
const getDataApis = async () => {
  dataApis.value = await ApiTypeInfoApi.getApiTypeInfoAll(1)
}

const backName = ref();
/** 查详情 */
const backLast = async () => {
  closeCurrent(this)
  router.push({
    name: backName.value
  })
}

/** 刷新数据 */
const refreshData = async (type:string) => {
  const respData = await DataQueryApi.refreshData({dataId: dataId.value, type})

  if (type === 'ZCI023'){
    dataResp.value.tanzc = respData
  }else if (type === 'ZCI008'){
    dataResp.value.qjld = respData
  }else if (type === 'ZCI022'){
    dataResp.value.qjda = respData
  }else if (type === 'ZCI007'){
    dataResp.value.fyfx = respData
  }else if (type === 'ZCI003'){
    dataResp.value.zwsc = respData
  }else if (type === 'ZCI101'){
    dataResp.value.wdgz = respData
  }else if (type === 'ZCI105'){
    dataResp.value.fqz = respData
  }else if (type === 'ZCI104'){
    dataResp.value.xfhx = respData
  }else if (type === 'ZCI106'){
    dataResp.value.dtjd = respData
  }else if (type === 'lsbg'){
    dataResp.value.lsbg = respData
  }
}


const dataResp = ref({
  id: undefined,
  validMethod: undefined,
  queryTime: undefined,
  queryName: undefined,
  queryIdCard: undefined,
  vaildResult: undefined,
  validBirthday: undefined,
  validAddress: undefined,
  validAddressType: undefined,
  validGender: undefined,
  validAge: undefined,
  riskType: undefined,
  riskTypeFinanceIds: [],
  tanzc: undefined,
  qjld: undefined,
  qjda: undefined,
  fyfx: undefined,
  zwsc: undefined,
  lsbg: undefined,
  wdgz: undefined,
  fqz: undefined,
  xfhx: undefined,
  dtjd: undefined,
})

/** 查详情 */
const getData = async (id:number) => {
  dataResp.value = await DataQueryApi.getDataQuery(id);
  await getLz(dataResp.value.riskTypeFinanceIds)
}

/** 初始化 **/
onMounted(() => {
  // 如果数据 ID 不存在，显示错误提示并关闭页面
  if (!route.query.id) {
    message.error('数据 ID 不存在，无法查看客户资质')
    // 关闭当前路由，返回到数据列表页面
    router.push({ name: 'DataQuery' })
    return
  }

  // 从路由参数中获取数据 ID
  dataId.value = route.query.id as any
  backName.value = route.query.location as any
  getData(dataId.value)
  getDataApis()
})
</script>

<style scoped lang="scss">

</style>
